<template>
  <my-table
    :data="tableData"
    @submit="editData"
  ></my-table>
</template>
<script setup>
import MyTable from "./components/MyTable";

import { ref } from "vue";

const tableData = ref({
  tHead: [
    {
      key: "id",
      text: "学号",
      editable: false
    },
    {
      key: "name",
      text: "姓名",
      editable: false
    },
    {
      key: "age",
      text: "年龄",
      editable: false
    },
    {
      key: "chinese",
      text: "语文",
      editable: true
    },
    {
      key: "math",
      text: "数学",
      editable: true
    },
    {
      key: "english",
      text: "英语",
      editable: true
    }
  ],
  tBody: [
    {
      id: 1,
      name: "张三",
      age: 16,
      chinese: 124,
      math: 116,
      english: 105
    },
    {
      id: 2,
      name: "李四",
      age: 15,
      chinese: 117,
      math: 132,
      english: 92
    },
    {
      id: 3,
      name: "王五",
      age: 17,
      chinese: 99,
      math: 112,
      english: 128
    }
  ]
});

//编辑表格的数据
const editData = ({ index, key, value }) => {
  if (tableData.value.tBody[index][key] != value) {
    let { text } = tableData.value.tHead.find(item => item.key === key); //获取现在点击的是哪一个分类
    const cfm = window.confirm(
      `确定要将「${tableData.value.tBody[index].name}」的「${text}」成绩修改为「${value}」吗？`
    );

    if (cfm) {
      tableData.value.tBody = tableData.value.tBody.map((item, idx) => {
        if (index === idx) {
          item[key] = value;
        }
        return item;
      });
    }
  }
};
</script>

<style lang="scss">
</style>
